<template>
    <div class="app-container">
        <!-- <input type="text" autocomplete="off" v-model="asnId" placeholder="do单号">
        <button type="button" @click="fetchActivityOrders">
            <span>查询</span>
        </button>
        <button type="button" @click="research">
            <span>重置</span>
        </button> -->


        <!-- 新建do单 -->
        <el-button type="text" @click="createOrderDialogVisible = true">创建do单</el-button>
        <el-dialog title="创建do单" :visible.sync="createOrderDialogVisible">
            <el-form :model="createOrderForm" label-width="110px">
                <el-form-item label="asnId">
                    <el-input v-model="createOrderForm.asnId" autocomplete="off" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="潜质仓短Id">
                    <el-input v-model="createOrderForm.warehouseId" autocomplete="off" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="大仓短Id">
                    <el-input v-model="createOrderForm.fromWarehouseId" autocomplete="off" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="计划发货时间">
                    <el-date-picker v-model="createOrderForm.planCheckoutTime" type="datetime" placeholder="选择日期,+1为履约日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <!-- 发货单商品详细信息 -->
                <el-table :data="createOrderForm.上品QtyList" size="medium">
                    <el-table-column label="商品短Id" prop="上品Id">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.上品Id"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品数量" prop="qty">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.qty"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="增加/减少商品">
                        <template slot-scope="scope">
                            <el-button @click="addHandle">+</el-button>
                            <el-button @click="deleteHandle($index)">-</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-form-item>
                    <el-button type="primary" @click="createdoOrder">立即创建</el-button>
                    <el-button @click="resetdoOrderInfo()">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createOrderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createOrderDialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- do单信息展示 -->
        <el-table v-loading="listLoading" :data="doOrders" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="asnId">
                <template slot-scope="scope">
                    {{ scope.row.asnId }}
                </template>
            </el-table-column>
            <el-table-column label="潜质仓Id" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.warehouseId }}</span>
                </template>
            </el-table-column>

            <el-table-column label="大仓Id" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.fromWarehouseId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="计算发货时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.planCheckoutTime }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column label="商品明细" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="doOrderProductDetailVisible = true;fetchProductDetail(scope.row.asnId)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="do单商品详情" :visible.sync="doOrderProductDetailVisible" width="80%" :before-close="handleClose">
            <el-table v-loading="listLoading" :data="productDetailList" element-loading-text="Loading" border fit
                highlight-current-row>
                <el-table-column align="center" label="序号" width="110">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品id">
                    <template slot-scope="scope">
                        {{ scope.row.上品Id }}
                    </template>
                </el-table-column>   
                <el-table-column align="center" label="商品数量">
                    <template slot-scope="scope">
                        {{ scope.row.qty }}
                    </template>
                </el-table-column>  
            </el-table>
        </el-dialog>


        <!-- 发货单商品详细信息 -->
        <!-- <el-table :data="createOrderForm.上品QtyList">
            <el-table-column lable="商品短id" prop="name">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.上品Id"></el-input>
                </template>
            </el-table-column>
            <el-table-column lable="数量" prop="count">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.qty"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="商品列表">
                <template slot-scope="scope">
                    <el-button @click="addHandle">+</el-button>
                    <el-button @click="deleteHandle($index)">-</el-button>
                </template>
            </el-table-column>
        </el-table> -->


    </div>
</template>
  
<script>
import { adddoOrder } from '@/api/doOrder/doOrder'
import { getdoOrderList } from '@/api/doOrder/doOrder'
import {getProductDetail} from '@/api/doOrder/doOrder'

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            listLoading: true,
            dialogVisible: false,
            activityId: "",
            activityOrders: null,
            doOrders: [],
            asnId: "",
            createOrderDialogVisible: false,
            createOrderForm: {
                asnId: "",
                warehouseId: '',
                fromWarehouseId: "",
                planCheckoutTime: "",
                上品QtyList: [{
                    上品Id: '',
                    qty: '',
                }]
            },
            doOrderProductDetailVisible:false,
            productDetailList:[]

        }
    },
    created() {
        this.fetchdoOrderList()
    },
    methods: {
        createdoOrder() {
            adddoOrder({
                "asnId": this.createOrderForm.asnId,
                "warehouseId": this.createOrderForm.warehouseId,
                "fromWarehouseId": this.createOrderForm.fromWarehouseId,
                "planCheckoutTime": this.createOrderForm.planCheckoutTime,
                "上品QtyList": this.createOrderForm.上品QtyList
            }).then(response => {
                console.log(response)
                this.fetchdoOrderList()
                this.createOrderDialogVisible = false
                this.$message.success(`${response.message}`)
            })
        },
        resetdoOrderInfo(){
            this.createOrderForm.asnId = "",
            this.createOrderForm.warehouseId = "",
            this.createOrderForm.fromWarehouseId = "",
            this.createOrderForm.planCheckoutTime = "",
            this.createOrderForm.上品QtyList = [{
                    上品Id: '',
                    qty: '',
                }]
            
        },
        addHandle() {
            this.createOrderForm.上品QtyList.push({
                上品Id: '',
                qty: '',
            })
        },
        deleteHandle(i) {
            this.createOrderForm.上品QtyList.splice(i, 1)
        },
        fetchdoOrderList() {
            this.listLoading = true
            getdoOrderList({
                "asnId": ""
            }
            ).then(response => {
                console.log(response)
                this.doOrders = response.data
                this.listLoading = false
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        research() {
            this.activityId = ""
            this.fetchActivityOrders()
        },
        fetchProductDetail(asnId){
            getProductDetail({
                "asnId":asnId
            }).then(response =>{
                console.log(response)
                this.productDetailList = response.data
            })
        }

    }
}
</script>
  
<style></style>